<template>
	<view class="bg-white" style="height:100%;min-width: 100%;">
		<!--step0-->
		<view class="padding-30 margin-top-20">
			<view class="flex-row align-item-center margin-bottom-20">
				<view class="fs-16 fw-600 mr-right-10">{{deviceInfo.name || ''}}</view>
				<view v-if="deviceInfo.tupuStatus == 1" class="green-bg-color border-radius-10 white-color fs-13 padding-left-right-30" @click="maskTuopu('again')">重新生成</view>
			</view>
			
			<view class="fs-13 dark-color ">
				设备数量：{{deviceInfo.devNum || '0'}}台
				<text class="fs-13 dark-color mr-left-20">网络异常：{{deviceInfo.wangluoError || '0'}}台</text>
				<text class="fs-13 dark-color mr-left-20">电路异常：{{deviceInfo.dianluError || '0'}}台</text>
			</view>
			
		</view>
		
		<!-- <view class="flex-row align-item-center margin-top-50 jus-around">
			<text :class="{'green-color':showIndex == 0}" @click="switchShowIndex(0)">网络拓扑</text>
			<view style="height: 32rpx;width: 1px;" class="green-bg-color"></view>
			<text :class="{'green-color':showIndex == 1}" @click="switchShowIndex(1)">电路拓扑</text>
		</view> -->
		<!-- <treeView></treeView> -->
		<treeView v-if="netImgStatus == 1" :treeData="tpData" ref="treeRef"></treeView>
		<view class="flex-column align-item-center" v-else>
			<image :src="netImgStatus == 0?waitingSrc:failSrc" mode="aspectFit" style="width: 140rpx;"></image>
			<text v-if="netImgStatus == 0" class="fs-13 green-color" style="margin-top: -100rpx;">拓扑图生成中，预计20分钟至90分钟,请稍等片刻</text>
			<text v-if="netImgStatus == 2" class="fs-13 red-color" style="margin-top: -100rpx;">{{failMsg}}</text>
		</view>
		
		
		<view class="heightPlaceholder" v-if="netImgStatus == 2"></view>
		<view class="btn_bottomView" v-if="netImgStatus == 2">
			<view class="submit-green-btn" @click="maskTuopu('again')">生成拓扑图</view>
		</view>
	</view>
</template>

<script>
	import treeView from './tree.vue'
	export default {
		components:{
			treeView
		},
		data() {
			return {
				deviceInfo:{},//tupuStatus:'',//0未生成  1已生成 2生成失败 3生成中。
				showItems:[
					{'name':'网络拓扑',flag:'network',url:'api/index'},
					{'name':'电路拓扑',flag:'dianlu',url:'api/3_0/getDianluTuopu_3_0'}
				],
				tpData:{},
				showIndex:0,
				failMsg:'',
				netImgStatus:0,//0 生成中  1 成功  2 失败
				loadingSrc:'https://operation.76th.cn/uploads/20240903/c9943e2ab3ff8a9e7f21875df8aae53b.png',
				waitingSrc:'https://operation.76th.cn/uploads/20240903/e0465100c8e3dae700dc69d020c09264.png',
				failSrc:'https://operation.76th.cn/uploads/20240903/497b62e0b5764973ce2574f5cdd49224.png'
			}
		},
		
		onLoad(options) {
			
			if(options.params){
				this.deviceInfo = JSON.parse(options.params)
			}
			if(this.deviceInfo.token){
				uni.setStorageSync('token',this.deviceInfo.token)
			}
			this.$nextTick(()=>{
				this.$refs.treeRef.init()
			})
			
			//获取拓扑确认
			//tupuStatus:'',//0未生成  1已生成 2生成失败 3生成中。
			if(this.deviceInfo.tupuStatus == 1){
				this.getDetail()
			}else{
				this.maskTuopu()
			}
		},
		
		methods: {
			maskTuopu(type){
				let data = {
					powerboxId: this.deviceInfo.id
				}
				this.netImgStatus = 0
				this.$http.postJSONJAVA({
					url: 'api/maskTuopu',
					data: data
				}).then(res => {
					if (res.code == 1) {
						if(res.message == '生成中，请耐心等待'){
							return
						}
						if(type != 'again'){
							this.getDetail()
						}
						
					}else{
						this.netImgStatus = 2
						this.failMsg = res.message
					}
				})
			},
			switchShowIndex(index){
				this.showIndex = index
				this.netImgStatus = 0
				this.getDetail()
			},
			getDetail() {
				let data = {
					powerboxId: this.deviceInfo.id
				}
				let url = this.showItems[this.showIndex].url
				this.$http.postJSONJAVA({
					url: url,
					data: data
				}).then(res => {
					console.log('res',res)
					if (res) {
						this.tpData = res
						uni.setStorageSync('tpData',res)
						var that = this
						setTimeout(function() {
							that.netImgStatus = 1
						}, 10);
						// this.$refs.treeRef.init(res)
					}
				})
			},
		}
	}
</script>

<style>
	
</style>